<template>
    <div id="content">
        <el-tabs v-model="editableTabsValue" type="card" @tab-click="updateActiveTab">
            <el-tab-pane v-for="item in editableTabs" :key="item.name" :name="item.name">
                <span slot="label"><i class="el-icon-discover"></i> {{ item.title }}</span>
                <keep-alive>
                    <RelationTransactionTrailContent :type="item.name" v-if="item.name == editableTabsValue"></RelationTransactionTrailContent>
                </keep-alive>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import RelationTransactionTrailContent from './relation-transaction-trail/relation-transaction-trail-content.vue';

@Component({
    name: 'RelationTransactionTrail',
    components: { RelationTransactionTrailContent },
})
export default class RelationTransactionTrail extends Vue {
    private editableTabsValue: string = 'current'; // 当前标签
    private editableTabs = [
        {
            name: 'current',
            title: '关联交易试算',
        },
        {
            name: 'history',
            title: '历史试算结果',
        },
    ]; // 所有tabs值

    // 切换标签页
    private updateActiveTab(tab): void {}
}
</script>
<style lang="scss" scoped>
#content {
    padding-top: 2px;
    min-width: 1100px;
    background-color: #f1f0f0;
    height: 100%;
    /deep/ .el-tab-pane {
        color: #000;
    }
}
/deep/ .el-tabs > .el-tabs__header .el-tabs__item {
    border: 1px solid #e4e7ed;
    border-bottom: none;
    padding: 0 14px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    span {
        border: none;
    }
    &:nth-child(2) {
        padding-left: 14px;
    }
    &:last-child {
        padding-right: 14px;
    }
}
/deep/ .el-tabs {
    .el-tabs__nav {
        border: none;
        .is-active {
            border-color: #409eff;
            border-bottom: 2px solid #409eff;
        }
    }
}
</style>
